<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入内容清单，按回车键确认" v-model.trim="title" @keyup.enter="add">
  </div>
</template>


<script setup>
import { ref, inject } from 'vue';

// 1. 订阅添加方法
const addTodo = inject('addTodo');

// 2. 定义属性和方法
let title = ref('');

const add = () => {
  //  获取内容
  const curTitle = title.value;
  console.log(curTitle);

  if (!curTitle) return;

  // 构建 todo 对象
  let todo = { title: curTitle, finished: false };
  // this.$emit();
  addTodo(todo);

  title.value = '';
}
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
  outline: none;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(255, 0, 0, 0.8);
  box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
</style>
